{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '其他插件:example/other/index', '弹出式工具栏'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">弹出式工具栏 jquery.toolbar</div>
        </header>
        <div class="card-body">
        
          <div class="row">
          <div class="col-md-4 col-sm-6 mb-4">
            <p>顶部工具栏</p>
            <div class="btn-jq-toolbar" id="top-toolbar"><i class="mdi mdi-cog"></i></div>
            <hr/>
          </div>
          <div class="col-md-4 col-sm-6 mb-4">
            <p>左侧工具栏</p>
            <div class="btn-jq-toolbar btn-primary" id="left-toolbar"><i class="mdi mdi-cog"></i></div>
            <hr/>
          </div>
          <div class="col-md-4 col-sm-6 mb-4">
            <p>顶部工具栏</p>
            <div class="btn-jq-toolbar btn-danger" id="bottom-toolbar"><i class="mdi mdi-cog"></i></div>
            <hr/>
          </div>
          <div class="col-md-4 col-sm-6 mb-4">
            <p>右侧工具栏</p>
            <div class="btn-jq-toolbar btn-warning" id="right-toolbar"><i class="mdi mdi-cog"></i></div>
            <hr/>
          </div>
          <div class="col-md-4 col-sm-6 mb-4">
            <p>点击显示</p>
            <div class="btn-jq-toolbar btn-info" id="click-toolbar"><i class="mdi mdi-cog"></i></div>
            <hr/>
          </div>
          <div class="col-md-4 col-sm-6 mb-4">
            <p>翻转效果</p>
            <div class="btn-jq-toolbar btn-success" id="flip-toolbar"><i class="mdi mdi-cog"></i></div>
            <hr/>
          </div>
          <div class="col-md-4 col-sm-6 mb-4">
            <p>放大效果</p>
            <div class="btn-jq-toolbar btn-purple" id="grow-toolbar"><i class="mdi mdi-cog"></i></div>
          </div>
          <div class="col-md-4 col-sm-6 mb-4">
            <p>飞入效果</p>
            <div class="btn-jq-toolbar btn-secondary" id="flyin-toolbar"><i class="mdi mdi-cog"></i></div>
          </div>
          <div class="col-md-4 col-sm-6 mb-4">
            <p>弹跳效果</p>
            <div class="btn-jq-toolbar btn-dark" id="bounce-toolbar"><i class="mdi mdi-cog"></i></div>
          </div>
        </div>

        <!--按钮组自己定义，这里使用固定的一个-->
        <div id="toolbar-options" class="d-none">
          <a href="#!"><i class="mdi mdi-pause"></i></a>
          <a href="#!"><i class="mdi mdi-content-cut"></i></a>
          <a href="#!"><i class="mdi mdi-microphone"></i></a>
        </div>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#top-toolbar').toolbar({
            content: '#toolbar-options',
            position: 'top',
            style: 'default'
        });
        $('#left-toolbar').toolbar({
            content: '#toolbar-options',
            position: 'left',
            style: 'primary'
        });
        $('#bottom-toolbar').toolbar({
            content: '#toolbar-options',
            position: 'bottom',
            style: 'danger'
        });
        $('#right-toolbar').toolbar({
            content: '#toolbar-options',
            position: 'right',
            style: 'warning'
        });
        $('#click-toolbar').toolbar({
            content: '#toolbar-options',
            style: 'info',
            event: 'click'
        });
        $('#flip-toolbar').toolbar({
            content: '#toolbar-options',
            style: 'success',
            animation: 'flip',
        });
        $('#grow-toolbar').toolbar({
            content: '#toolbar-options',
            style: 'purple',
            animation: 'grow',
        });
        $('#flyin-toolbar').toolbar({
            content: '#toolbar-options',
            style: 'secondary',
            animation: 'flyin',
        });
        $('#bounce-toolbar').toolbar({
            content: '#toolbar-options',
            style: 'dark',
            animation: 'bounce',
        });
    });
    </script>